<template>
  <div class="reset_container">
    <!--导航栏-->
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="重置登录密码"/>

    <!--表单-->
    <van-form class="reset-body" @submit="submitUpdatePwd">
      <van-field clearable label="原密码：" placeholder="请输入原密码" type="password" v-model="pwdInfo.oldPwd"
                 :error-message="errorInfo.oldPassword" class="reset-item" @blur="validatorOldPassword"
                 @focus="errorInfo.oldPassword='';flag=true"/>
      <van-field clearable label="新密码：" type="password" placeholder="请输入新密码" v-model="pwdInfo.newPwd"
                 :error-message="errorInfo.newPassword" class="reset-item" :disabled="flag"
                 @blur="validatorNewPassword" @focus="errorInfo.newPassword=''"/>
      <van-field clearable label="重复新密码：" placeholder="请重复输入新密码" type="password" v-model="pwdInfo.repNewPwd"
                 :error-message="errorInfo.repPassword" class="reset-item" :disabled="flag" @blur="validatorRepPassword"
                 @focus="errorInfo.repPassword=''"/>
      <!-- 按钮部分-->
      <div class="btn-group">
        <van-button round block type="primary" native-type="submit" :loading="loading">确定</van-button>
        <van-button round block @click="clickCancel">取消</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {pwdReg} from "@/Regular/regx";

export default {
  name: "resetPwd",

  data() {
    return {
      pwdInfo: {
        oldPwd: "",
        newPwd: "",
        repNewPwd: ""
      },
      flag: true,
      errorInfo: {
        oldPassword: "",
        newPassword: "",
        repPassword: ""
      },
      loading: false,
    };
  },

  mounted() {
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    let htmlDom = document.getElementsByClassName("reset_container")[0];
    htmlDom.style.height = height + "px";
  },

  methods: {
    // 验证原密码
    async validatorOldPassword() {
      if (this.pwdInfo.oldPwd === "") {
        this.errorInfo.oldPassword = "请输入密码";
        return;
      }
      // 检查原密码需要的参数
      let params = {
        userId: this.$store.getters.user.userId,
        password: this.pwdInfo.oldPwd
      };
      // 先检查用户登录密码是否一样
      let result = await this.$axios.post(this.$api.checkLoginPassword, params);
      if (result.status === 200 && result.data.code === 200) {
        this.flag = false;
      } else {
        this.$toast(result.data.message);
      }
    },
    // 验证新密码
    validatorNewPassword() {
      if (this.pwdInfo.newPwd.length < 8 || this.pwdInfo.newPwd.length > 16) {
        this.errorInfo.newPassword = "输入的密码长度为8-16位";
        return;
      }
      if (!pwdReg.test(this.pwdInfo.newPwd)) {
        this.errorInfo.newPassword = "密码必须是数字，字母";
        return;
      }
      if (this.pwdInfo.newPwd === this.pwdInfo.oldPwd) {
        this.errorInfo.newPassword = "新密码与原密码相同，请更换";
      }
    },
    //再次输入密码
    validatorRepPassword() {
      if (!pwdReg.test(this.pwdInfo.repNewPwd)) {
        this.errorInfo.repPassword = "密码必须是数字，字母";
        return;
      }
      if (this.pwdInfo.newPwd !== this.pwdInfo.repNewPwd) {
        this.errorInfo.repPassword = "两次密码不一样，请更换";
      }
    },

    // 提交数据实现修改
    async submitUpdatePwd() {
      this.validatorNewPassword();
      this.validatorRepPassword();

      //开启状态
      this.loading = true;

      // 修改后的参数
      let newParams = {
        userId: this.$store.getters.user.userId,
        newPassword: this.pwdInfo.newPwd
      };
      let res = await this.$axios.post(this.$api.updatePassword, newParams);
      if (res.status === 200 && res.data.code === 200) {
        //清除缓存
        localStorage.removeItem("eleToken");
        // 清除Vuex的数据
        this.$store.dispatch("clearCurrentState");
        setTimeout(() => {
          this.loading = false;
          this.$toast("修改成功，请重新登录");
          this.$router.push("/login");
        }, 200);
      } else {
        this.loading = false;
        this.$toast(res.data.message);
      }
    },

    //取消按钮
    async clickCancel() {
      this.$router.push("/safe");
    }
  }
};
</script>

<style lang="less" scoped>
.reset_container {
  background-color: #fff;

  .reset-body {
    padding: 1rem .6rem 0;
  }

  .reset-item {
    margin: .7rem 0;
    border-radius: 1rem;
    border: 1px solid #c6fb95;
  }

  .btn-group {
    padding: 0 10px;
    margin-top: 5rem;

    .van-button {
      width: 100%;
      border-radius: 30px;
      margin-bottom: 1rem;

      &:nth-child(2) {
        background-color: #cccccc;
      }
    }
  }
}
</style>
